<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{margin:0;
     padding:0;
    box-sizing: border-box;
    list-style: none;
    }
    a{display:block;}*
      #header{
        background:#1d6dff;
        height: 1.3333rem;
        /* padding: .1333rem; */
        text-align: center;
        overflow: hidden;
    }

    #header .left {
        margin-top: .1333rem;
        text-align: center;
        font-size: .5333rem;
        color: #fff;
        float: left;
        text-decoration: none;
    }
    #header h4{
        display: inline-block;
        text-align: center;
        font-size: .5333rem;

        font-weight: bolder;
        color: #fff;
        margin-top: .2667rem;
        margin-bottom: .2667rem;
    }
     #header .right {
         float: right;
         padding: 0.1867rem;
    }
    #header .right a{
        color: #666;
        text-decoration: none;
    }
    #header .right a img{
        height: .9067rem;
        vertical-align: center;
    }
    .container{
        display:block;
        margin-bottom: .2667rem;
    }
    .container li{
       float:left;
       width:50%;
       /* height: 5.2rem; */
       border: .0267rem solid #ccc;
       /* padding-top: 1.3333rem; */
       padding: .2667rem .2133rem;
       font-size: .4267rem;
    }
    .container li a{
        cursor: pointer;
        text-decoration: none;
    }
    .container li a:hover{
        color:#666;
    }
    .container li a .picture img{
        text-align: center;
        width: 3.7333rem;
    }
    .container li a .title{
        color: black;
        margin-bottom: .1333rem;
        margin-top: .1333rem;
        
    }
    .container li a .price{
        color: #1d6dff;
        margin: 0 0 .2667rem;
    }
    .container li a .from{
        font-size: 13px;
        color: #9d9d9d;
    }
    .row{
        height: .8rem;
        margin-top: .2667rem;
        border-bottom: .0267rem solid #c4c4c4;
        border-top: .0267rem solid #c4c4c4;
        margin-right: -0.4rem;
        margin-left: .4rem;
    }
    .row a{
        display: block;
        width: 11.04rem;
    }
    .row a div{
        height: .88rem;
        line-height: .88rem;
        text-align: center;
        font-size: .3733rem;
        border-right: .0267rem solid #c4c4c4;
        float:left;
        padding: 0 .4rem;
    }
    .row a .top{
        width: 25%;    
    }
    .row a .middle{
        width: 33.33333%;
    }
    .row a .last{
        width: 41.66666666%;
    }
</style>
<body>
    <header id="header">
        
        <a href="../index.html" class="left">
            〈
        </a>
        <h4>
        国内折扣
        </h4>
         <div class="right">
            <a href="#"><img src="../images/header_app.png" alt="" width="34"></a>    
         </div>
    </header>
    <ul class="container">
 
    </ul>
    <div class="row">
        <a href="#">
            <div class="top">登入</div></a>
        <a href="#"><div class="middle">注册</div></a>
        <a href="#"><div class="last">返回顶部</div></a>
    </div>
</body>
</html>
<script src="../utils/utils.js"></script>
<script src="../utils/flexible.js"></script>
<script>
     let container = document.querySelector('.container') 
     let el=""
     fetch('http://chst.vip:1234/api/getinlanddiscount')
     .then(body=>body.json())
     .then(res=>{
         console.log(res)
         let r=res.result
        //  console.log(r)
        
         r.forEach(item=>{
            //  console.log(item.productName)
            el+=`
            <li>
            <a href="#">
            <div class="picture">${item.productImg}</div>
            <div class="title">${item.productName}</div>
            <p clss="price">${item.productPrice}</p>
            <p class="from">${item.productFrom}
              ${item.productTime}  
            </p>    
            </a>    
            </li>
            `
            container.innerHTML=el
         })
       


     })
</script>